<template>
  <div class="Goods">
    <div class="banManage">
        <span class="classification">分类列表</span>
        <div class="listRight">
          <el-button class="newbanner" type="primary">导入商品</el-button>
          <el-button class="oneNav" type="primary" @click="newAdd()">新增一级分类</el-button>
        </div>
    </div>
    <div id="List"  style="height:70vh;overflow-y:auto">
      <table id="tableList">
        <tr class="trHead" style="box-sizing: border-box;">
          <th style="width:10%;">序号</th>
          <th style="width:25%;text-align:left;padding-left:5%">分类</th>
          <!-- <th style="width:13%">二级分类</th> -->
          <!-- <th style="width:13%">三级级分类</th> -->
          <th style="width:15%;">图片</th>
          <th style="width:15%;">商品数量</th>
          <th style="width:15%;">是否隐藏</th>
          <th style="width:20%;">操作</th>
        </tr>
      </table>
     <div class="box" v-for="(item,index) in yi" :key="index" :class="{on:index%2==0,off:index%2!=0}">
       <div class="listOne" >
         <p class="itemId">{{item.id}}</p>
        <p class="itemName" @click="show(item)">
          <img src="../../assets/img/false.png" alt="" v-if="item.boxx">
          <img src="../../assets/img/true.png" alt="" v-else="poxx">
          <span>{{item.name}}</span>
        </p>
        <p class="kong"></p>
        <p class="elSwich">
          <el-switch v-model="item.is_show" active-color="#13ce66" inactive-color="#C1C1C1" :active-value="1" :inactive-value="0" @change="changeStatus(item)"></el-switch>
        </p>
          <div class="operating">
            <button type="text" style="font-size:0.875rem;color:#436AF2;cursor: pointer;" class=" news" @click="newList(item)">新增二级分类</button>
            <button type="text" style="font-size:0.875rem;color:#436AF2;cursor: pointer;" class=" news" @click="handleEdit(item)">编辑</button> 
            <button type="text" style="font-size:0.875rem;color:#436AF2;cursor: pointer;" @click="deleteUser(item.id)">删除</button>
          </div>
       </div>
        <div v-for="(item1,index) in item.parent" :key="index" class="listTwo" v-show="item.isShow">
          <div class="twoJi">
            <div class="yiyi">
            <span class="twoOne" @click="showtwo(item1)">
              {{item1.name}}
              <i class="el-icon-arrow-down"  v-if="item1.boxx"></i>
              <i class="el-icon-arrow-right"  v-else="poxx"></i>
            </span>
            <span class="twoL"><img :src="item1.image"  :preview="[item1.image]" alt=""></span>
            <span class="twoTh">{{item1.sort_order}}</span>
            <span class="elSwichs"><el-switch v-model="item1.is_show" active-color="#13ce66" inactive-color="#C1C1C1" :active-value="1" :inactive-value="0" @change="changeStatuss(item1)"></el-switch></span>
             <span class="btns">
               <button type="text" style="font-size:0.875rem;color:#436AF2;cursor: pointer;" class=" news" @click="newLisThree(item1)">新增三级分类</button>
              <button type="text" style="font-size:0.875rem;color:#436AF2;cursor: pointer;" class=" news" @click="handleEditTwo(item1,item)">编辑</button> 
              <button type="text" style="font-size:0.875rem;color:#436AF2;cursor: pointer;" @click="deleteUser(item1.id)">删除</button>
            </span>
          </div>
          </div>
          <div v-for="(item2,index) in item1.parent" :key="index" class="sanJi" v-show="item1.thShow">
            <div class="threeJi">
               <span class="threeOne">{{item2.name}}</span>
            <span class="threeImg">
              <img :src="item2.image"  :preview="[item2.image]" alt="">
              <!-- <img src="../../assets/img/bg.png" alt=""> -->
            </span>
            <span class="threeTh">{{item2.sort_order}}</span>
            <span class="thSwichs"><el-switch v-model="item2.is_show" active-color="#13ce66" inactive-color="#C1C1C1" :active-value="1" :inactive-value="0" @change="changeStatuss(item1)"></el-switch></span>
             <span class="btnThree">
               <button type="text" style="visibility:hidden;cursor: pointer;" >新增三级分类</button>
              <button type="text" style="font-size:0.875rem;color:#436AF2;cursor: pointer;" class=" news" @click="handleEditThree(item2,item1)">编辑</button> 
              <button type="text" style="font-size:0.875rem;color:#436AF2;cursor: pointer;" @click="deleteUser(item2.id)">删除</button>
            </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增一级分类 -->
    <el-dialog :visible.sync="addOne" width="26%" class="radios yi">
        <span class="nav">新增一级分类</span>
        <div class="navBox">
         <el-form :model="formList" :rules="rules" ref="formList">
           <el-form-item label="分类名称" prop="name">
             <el-input placeholder="请输入名称" v-model="formList.name" maxlength="15" minlength="2" show-word-limit type="text"></el-input>
           </el-form-item>
           <el-form-item label="分类序号" prop="id">
              <el-input placeholder="请输入序号" v-model="formList.serialNumber" type="text"></el-input>
            </el-form-item>
            <el-form-item label="轮播图状态">
              <div class="stateButton">
                <form name="my_form" method="POST" style="display:flex;line-height:45px;padding-top:6px;">
                    <input type="radio" v-model="radioVal" name="question1" value="0"  @change="getRadioVal" style="width:18px;height:18px;margin-top:13px;margin-right:5px;margin-left:10px;"><span style="font-size:0.875rem">显示</span>
                    <input type="radio" v-model="radioVal" name="question1" value="1"  @change="getRadioVal" style="width:18px;height:18px;margin-left:14px;margin-top:13px;margin-right:5px;"><span style="font-size:0.875rem">隐藏</span>
                  </form>
              </div>
            </el-form-item>
         </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog()" style="width:100px;height:38px;font-size:0.875rem;border-radius:5px;">取 消</el-button>
          <el-button @click="submitForm()" style="width:100px;height:38px;background-color:#436AF2;color:#fff;font-size:0.875rem;border-radius:5px;">确 定</el-button>
        </span>
      </el-dialog>  

    <el-dialog :visible.sync="editFormVisible" width="30%" class="radios yi">
        <span class="nav">编辑一级分类</span>
        <div class="navBox">
         <el-form :model="formListBian" :rules="rules" ref="formList">
           <el-form-item label="分类名称" prop="name">
             <el-input placeholder="请输入名称" v-model="formListBian.nameB" maxlength="15" minlength="2" show-word-limit type="text"></el-input>
           </el-form-item>
           <el-form-item label="分类序号" prop="id">
              <el-input placeholder="请输入序号" v-model="formListBian.serialNumberB" type="text"></el-input>
            </el-form-item>
            <el-form-item label="轮播图状态">
              <div class="stateButton">
                <el-row class="stateText">
                  <form name="my_form" method="POST" style="display:flex;line-height:45px;">
                    <input type="radio" v-model="radioVal" name="question2" value="0"  @change="getRadioVal" style="width:18px;height:18px;margin-top:13px;margin-right:5px;margin-left:10px;"><span style="font-size:1rem">显示</span>
                    <input type="radio" v-model="radioVal" name="question2" value="1"  @change="getRadioVal" style="width:18px;height:18px;margin-top:13px;margin-right:5px;margin-left:10px;"><span style="font-size:1rem">隐藏</span>
                  </form>
                </el-row>
              </div>
            </el-form-item>
         </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog()" style="width:100px;height:38px;font-size:1rem;border-radius:5px;">取 消</el-button>
          <el-button @click="submitFormes('formListBian')" style="width:100px;height:38px;background-color:#436AF2;color:#fff;font-size:1rem;border-radius:5px;">确 定</el-button>
        </span>
      </el-dialog>

       <el-dialog :visible.sync="newTwo" width="520px" >
        <span class="nav">新增二级分类</span>
        <div class="navBox">
          <el-form label-width="80px" :model="formLisTwo" :rules="rules"><!-- :model="formList"表单数据对象 -->
          <el-form-item label="上级分类">
                <el-input placeholder="请输入名称" v-model="formLisTwo.namess" maxlength="15" show-word-limit type="text"></el-input>
            </el-form-item>
            <el-form-item label="分类名称" prop="name">
              <el-input placeholder="请输入名称" v-model="formLisTwo.name" maxlength="15" show-word-limit type="text"></el-input>
            </el-form-item>
            <el-form-item label="分类图片" prop="image">
            <el-upload style="overflow:hidden;" class="avatar-uploader" action="http://guanli.lyqswl.com/Admin.php/index/image" :show-file-list="false" :on-success="handleAvatarSuccess">
              <img v-if="imgTwo" :src="imgTwo" class="avatar" >
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
              <span style="font-size:12px;color:#666666;font-weight: 400;line-height:20px;text-align:left;padding:0;width:40%;height:50px;padding-top:65px;display:inline-block">尺寸建议在800*800像素以上， 大小2M以下</span>
            </el-form-item>
            <el-form-item label="分类状态">
              <div class="stateButton">
                 <el-row class="stateText">
                  <form name="my_form" method="POST" style="display:flex;line-height:45px;">
                    <input type="radio" v-model="radioVal" name="question3" value="0"  @change="getRadioVal" style="width:18px;height:18px;margin-top:13px;margin-right:5px;margin-left:10px;"><span style="font-size:1rem">显示</span>
                    <input type="radio" v-model="radioVal" name="question3" value="1"  @change="getRadioVal" style="width:18px;height:18px;margin-top:13px;margin-right:5px;margin-left:10px;"><span style="font-size:1rem">隐藏</span>
                  </form>
                </el-row>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog()" style="width:100px;height:38px;font-size:1rem;border-radius:5px;">取 消</el-button>
          <el-button @click="submitFormTwo()" style="width:100px;height:38px;background-color:#436AF2;color:#fff;font-size:1rem;border-radius:5px;">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog :visible.sync="editFormVisibles" width="510px" >
        <span class="nav">编辑二级分类</span>
        <div class="navBox">
          <el-form label-width="80px" :model="editTwO" :rules="rules"><!-- :model="formList"表单数据对象 -->
          <el-form-item label="上级分类">
             <el-input placeholder="请输入名称" v-model="editTwO.namego" maxlength="15" show-word-limit type="text"></el-input>
            </el-form-item>
            <el-form-item label="分类名称" prop="name">
              <el-input placeholder="请输入名称" v-model="editTwO.name" maxlength="15" show-word-limit type="text"></el-input>
            </el-form-item>
            <el-form-item label="分类图片" prop="image">
            <el-upload
              style="overflow:hidden;"
              class="avatar-uploader"
              action="http://guanli.lyqswl.com/Admin.php/index/image"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
              <span style="font-size:12px;color:#666666;font-weight: 400;line-height:20px;text-align:left;padding:0;float:right;width:55%;height:50px;padding-top:65px;">尺寸建议在800*800像素以上， 大小2M以下</span>
            </el-form-item>
            <el-form-item label="分类状态">
              <div class="stateButton">
                 <el-row class="stateText">
                  <form name="my_form" method="POST" style="display:flex;line-height:45px;">
                    <input type="radio" v-model="radioVal" name="question4" value="0"  @change="getRadioVal" style="width:18px;height:18px;margin-top:13px;margin-right:5px;margin-left:10px;"><span style="font-size:1rem">显示</span>
                    <input type="radio" v-model="radioVal" name="question4" value="1"  @change="getRadioVal" style="width:18px;height:18px;margin-top:13px;margin-right:5px;margin-left:10px;"><span style="font-size:1rem">隐藏</span>
                  </form>
                </el-row>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog()" style="width:100px;height:38px;font-size:1rem;border-radius:5px;">取 消</el-button>
          <el-button @click="submitForms('editTwO')" style="width:100px;height:38px;background-color:#436AF2;color:#fff;font-size:1rem;border-radius:5px;">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog :visible.sync="newThree" width="520px" >
        <span class="nav">新增三级分类</span>
        <div class="navBox">
          <el-form label-width="80px" :model="formLisThree" :rules="rules"><!-- :model="formList"表单数据对象 -->
          <el-form-item label="上级分类">
                <el-input placeholder="请输入名称" v-model="formLisThree.namess" maxlength="15" show-word-limit type="text"></el-input>
            </el-form-item>
            <el-form-item label="分类名称" prop="name">
              <el-input placeholder="请输入名称" v-model="formLisThree.name" maxlength="15" show-word-limit type="text"></el-input>
            </el-form-item>
            <el-form-item label="分类图片" prop="image">
            <el-upload style="overflow:hidden;" class="avatar-uploader" action="http://guanli.lyqswl.com/Admin.php/index/image" :show-file-list="false" :on-success="handleAvatarSuccess">
              <img v-if="imgThree" :src="imgThree" class="avatar" >
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
              <span style="font-size:12px;color:#666666;font-weight: 400;line-height:20px;text-align:left;padding:0;width:40%;height:50px;padding-top:65px;display:inline-block">尺寸建议在800*800像素以上， 大小2M以下</span>
            </el-form-item>
            <el-form-item label="分类状态">
              <div class="stateButton">
                 <el-row class="stateText">
                  <form name="my_form" method="POST" style="display:flex;line-height:45px;">
                    <input type="radio" v-model="radioVal" name="question3" value="0"  @change="getRadioVal" style="width:18px;height:18px;margin-top:13px;margin-right:5px;margin-left:10px;"><span style="font-size:1rem">显示</span>
                    <input type="radio" v-model="radioVal" name="question3" value="1"  @change="getRadioVal" style="width:18px;height:18px;margin-top:13px;margin-right:5px;margin-left:10px;"><span style="font-size:1rem">隐藏</span>
                  </form>
                </el-row>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog()" style="width:100px;height:38px;font-size:1rem;border-radius:5px;">取 消</el-button>
          <el-button @click="submitFormThree()" style="width:100px;height:38px;background-color:#436AF2;color:#fff;font-size:1rem;border-radius:5px;">确 定</el-button>
        </span>
      </el-dialog>
<el-dialog :visible.sync="editFormThree" width="510px" >
        <span class="nav">编辑三级分类</span>
        <div class="navBox">
          <el-form label-width="80px" :model="editTwO" :rules="rules"><!-- :model="formList"表单数据对象 -->
          <el-form-item label="上级分类">
             <el-input placeholder="请输入名称" v-model="editTwO.namego" maxlength="15" show-word-limit type="text"></el-input>
            </el-form-item>
            <el-form-item label="分类名称" prop="name">
              <el-input placeholder="请输入名称" v-model="editTwO.name" maxlength="15" show-word-limit type="text"></el-input>
            </el-form-item>
            <el-form-item label="分类图片" prop="image">
            <el-upload
              style="overflow:hidden;"

              class="avatar-uploader"
              action="http://guanli.lyqswl.com/Admin.php/index/image"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrls" :src="imageUrls" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
              <span style="font-size:12px;color:#666666;font-weight: 400;line-height:20px;text-align:left;padding:0;float:right;width:55%;height:50px;padding-top:65px;">尺寸建议在800*800像素以上， 大小2M以下</span>
            </el-form-item>
            <el-form-item label="分类状态">
              <div class="stateButton">
                 <el-row class="stateText">
                  <form name="my_form" method="POST" style="display:flex;line-height:45px;">
                    <input type="radio" v-model="radioVal" name="question4" value="0"  @change="getRadioVal" style="width:18px;height:18px;margin-top:13px;margin-right:5px;margin-left:10px;"><span style="font-size:1rem">显示</span>
                    <input type="radio" v-model="radioVal" name="question4" value="1"  @change="getRadioVal" style="width:18px;height:18px;margin-top:13px;margin-right:5px;margin-left:10px;"><span style="font-size:1rem">隐藏</span>
                  </form>
                </el-row>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog()" style="width:100px;height:38px;font-size:1rem;border-radius:5px;">取 消</el-button>
          <el-button @click="submitForms('editTwO')" style="width:100px;height:38px;background-color:#436AF2;color:#fff;font-size:1rem;border-radius:5px;">确 定</el-button>
        </span>
      </el-dialog>
    <!-- 分页 -->
    <div class="paging">
      <div class="pagiton">
        <button class="btn btn-default" type="submit" @click="prePage"><i class="el-icon-caret-left"></i></button>
        <button class="btn btn-defaults" type="submit">{{current_page}}</button>
        <button class="btn btn-default" type="submit" @click="nextPage" :class="{disabled:disableds}"><i class="el-icon-caret-right"></i></button>
        <p class="remarks">共 <span> {{pagesize}} </span>条当前为第 <span> {{currentPage}} </span>页</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:"Goods",
  data(){
    return{
      one:[{one:'哈哈哈哈哈'}],
      boxx:true,
      poxx:false,
      radioVal:"",
      radioVal:"0",
      yi:[],
      currentPage: 1, //当前页号
      pagesize:20, //每页大小
      value:"",
      search:'',
        rules:{
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        id: [
          { required: true, message: '请输入序号', trigger: 'blur' }
        ],
        image: [
          { required: true, message: '请选择图片', trigger: 'blur' }
        ],
      },
      swiche:true,
      values:false,
      addOne:false,
       newTwo:false,
       newThree:false,
      editFormVisible: false, //控制编辑页面显示与隐藏
      editFormVisibles:false,
      editFormThree:false,
      beforeAvatarUpload:'',
      imageUrl: '',
      imgThree:'',
      imageUrls:'',
      imgTwo:'',
      name:"",
      nameB:"",
      serialNumber:'',
       //表单数据对象
      formList:{
        id:"",
        name:"",
        serialNumber:"",
        is_show:""
      },
      formListBian:{
        id:"",
        nameB:"",
        serialNumberB:"",
        is_show:"",
      },
      formLisTwo:{
        id:"",
        namess:"",
        name:"",
        is_show:""
      },
      editTwO:{
        id:"",
        parent_id:'',
        namego:"",
        name:""
      },
       formLisThree:{
        id:"",
        namess:"",
        name:"",
        is_show:""
      },
      data:'',
      thShow:true,
      disableds:false
    }
  },
   computed: {
    page_arrs() {
      let { currentPage, pagesize } = this;
      return this.listData.slice(
        (currentPage - 1) * pagesize,
        currentPage * pagesize
      );
    },
    current_page() {
      return this.currentPage;
    }
  },
  methods:{
    //显示与隐藏
    getRadioVal(){
      // console.log(this.radioVal,'二级显示隐藏');
    },
    //图片上传
      handleAvatarSuccess(res, file) {
      this.imgTwo = URL.createObjectURL(file.raw);
      this.imgThree = URL.createObjectURL(file.raw);
      this.imageUrl = URL.createObjectURL(file.raw);
      this.imageUrls = URL.createObjectURL(file.raw);
      this.date = res.data;
    },
     //商品分类一级添加
    submitForm(){
      this.$axios({
        methods:'post',
        url:'/index/item_fenlei_add',
        params:{
          name:this.formList.name,
          parent_id:this.formList.id,
          is_show:this.radioVal
        }
      }).then((res)=>{
        this.getdata()
        this.addOne = false
        this.formList.name=''
        this.loading = false
        console.log(res,'商品分类一级添加')
      })
      .catch(err => {
        this.addOne = false
        this.loading = false
        this.$message.error('公司保存失败，请稍后再试！')
      })
    },
    //列表一级开关 点击显示隐藏传给后端
    changeStatus(item,index){
      // console.log(item,"rowrow")
      this.$axios({
        url:'/index/item_fenlei_yin',
        methods:'post',
        params:{
         id:item.id,
         is_show:item.is_show
        }
      })
      .then(res =>{
        // console.log(res,"传")
      })
    },
    //列表二级开关 点击显示隐藏传给后端
    changeStatuss(item1,index){
      // console.log(item1,"rowrow")
      this.$axios({
        url:'/index/item_fenlei_yin',
        methods:'post',
        params:{
         id:item1.id,
         is_show:item1.is_show
        }
      })
      .then(res =>{
        this.getdata()
      })
    },
//新增二级分类
submitFormTwo(){
    this.$axios({
      methods:'post',
      url:'/index/item_fenlei_add',
      params:{
        name:this.formLisTwo.name,
        parent_id:this.formLisTwo.id,
        image:'http://guanli.lyqswl.com'+this.date,
        is_show:this.radioVal
      }
    }).then((res)=>{
      this.getdata()
      // console.log("二级分类",this.radioVal)
      this.newTwo = false
      this.loading = false
      this.formLisTwo.name=''
    
    })
    .catch(err => {
      this.newTwo = false
      this.loading = false
      this.$message.error('公司保存失败，请稍后再试！')
    })
},
//新增三级分类
submitFormThree(){
    this.$axios({
      methods:'post',
      url:'/index/item_fenlei_add',
      params:{
        name:this.formLisThree.name,
        parent_id:this.formLisThree.id,
        image:'http://guanli.lyqswl.com'+this.date,
        is_show:this.radioVal
      }
    }).then((res)=>{
      // console.log("二级分类",this.radioVal)
        this.getdata()
      this.newThree = false
      this.loading = false
      this.formLisThree.name=''
    
    })
    .catch(err => {
      this.newThree = false
      this.loading = false
      this.$message.error('添加失败！')
    })
},

  //新增编辑取消
    closeDialog(){
      this.addOne = false,
      this.editFormVisible =false,
      this.newTwo=false,
      this.editFormVisibles=false,
      this.editFormThree=false,
      this.newThree=false

    },
    // 新增二级分类
    newList(item){
      // console.log(item,'1111111111111111111')
      this.newTwo = true
      this.formLisTwo.namess=item.name
      this.formLisTwo.id=item.id
      this.imgTwo = ''
      this.imageUrl = ''
      this.is_show = ""
    },
    //新增三集
    newLisThree(item1){
      console.log(item1,'我是要传二级的')
      this.newThree = true
      this.formLisThree.namess=item1.name
      this.formLisThree.id=item1.id
      console.log(this.formLisThree.id,'ididiidididiid1111')
      this.imageUrls = ''
      this.imgThree = ''
      this.is_show = ""
    },
    //显示编辑一级
    handleEdit: function(item) {
      this.editFormVisible = true
      this.formListBian.nameB=item.name
      this.formListBian.id=item.id
      this.radioVal = item.is_show
      this.formListBian.serialNumberB=item.id
    },
    //点击一级编辑确定
    submitFormes(){
          this.$axios({
            method: 'post',
            url: '/index/item_fenlei_save',
            params:{
              name:this.formListBian.nameB,
              id:this.formListBian.id,
              is_show:this.radioVal,
              parent_id:0
            }
          })
          .then(res =>{
            console.log(res,'编辑一级')
              this.getdata()
              this.editFormVisible = false
            })
    },
     //显示编辑二级
    handleEditTwo: function(item1,item) {
      // console.log(item,'上一级')
      this.editFormVisibles = true
      this.editTwO.name=item1.name
      this.editTwO.namego=item.name
      this.editTwO.parent_id=item1.parent_id
      this.editTwO.id=item1.id
      this.imageUrl = item1.image
      this.radioVal = item1.is_show
    },
    //三级
    handleEditThree: function(item2,item1) {
      // console.log(item,'上一级')
      this.editFormThree = true
      this.editTwO.name=item2.name
      this.editTwO.namego=item1.name
      this.editTwO.parent_id=item2.parent_id
      this.editTwO.id=item2.id
      this.imageUrls = item2.image
      this.radioVal = item2.is_show
    },
    //点击二级编辑确定
    submitForms(){
      this.$axios({
        method: 'post',
        url: '/index/item_fenlei_save',
        params:{
          name:this.editTwO.name,
          parent_id:this.editTwO.parent_id,
          id:this.editTwO.id,
          image:'http://guanli.lyqswl.com'+this.date,
          is_show:this.radioVal
        }
      })
      .then(res =>{
        // console.log(res,'编辑二级')
          this.getdata()
          this.editFormVisibles = false
        })
    },
    //点击三级编辑确定
    submitForms(){
      this.$axios({
        method: 'post',
        url: '/index/item_fenlei_save',
        params:{
          name:this.editTwO.name,
          parent_id:this.editTwO.parent_id,
          id:this.editTwO.id,
          image:'http://guanli.lyqswl.com'+this.date,
          is_show:this.radioVal
        }
      })
      .then(res =>{
        // console.log(res,'编辑二级')
          this.getdata()
          this.editFormThree = false
        })
    },
    //v-for 嵌套循环点击显示与隐藏
    show(item){
      console.log(item)
      if(!item.isShow,!item.boxx,!item.poxx){
         this.$set(item,"boxx",false)
        this.$set(item,"poxx",false)
        this.$set(item,"isShow",false)
        item.boxx =!item.boxx
        item.isShow =!item.isShow
        item.poxx=!item.poxx
      }else{
        item.isShow = !item.isShow
        item.boxx = !item.boxx
        item.poxx=!item.poxx
      }
    },
showtwo(item1){
  console.log(item1,'1111111111111')
  if(!item1.thShow,!item1.boxx,!item1.poxx){
    this.$set(item1,"thShow",false)
    this.$set(item1,"boxx",false)
    this.$set(item1,"poxx",false)
    item1.thShow=!item1.thShow
    item1.boxx =!item1.boxx
    item1.poxx=!item1.poxx
  }else{
    item1.thShow=!item1.thShow
    item1.boxx = !item1.boxx
    item1.poxx=!item1.poxx
  }
    },
    // 分类列表
    getdata(){
       this.$axios({
        method: 'post',
        url: '/index/item_fenlei',
         params:{
              p:this.currentPage,
              size:this.pagesize
            }
      })
      .then(res=>{
        let data = res.data.data;
        this.yi=res.data.data
        if(data.length<20){
          this.disableds=true
        }else{
          this.disableds=false
        }
        console.log(res,"系统列表")
      })
    },
    //分页
    prePage() {
      if (this.currentPage == 1){
        return;
      }
      this.currentPage = this.currentPage - 1;
      this.getdata()
    },
    nextPage() {
      if (this.currentPage == Math.ceil(this.yi.length)) {
        return;
      }
      this.currentPage = this.currentPage + 1;
      this.getdata()
    },
     newAdd(){
      this.addOne = true
    },
     //删除
    deleteUser(id){
       this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
          this.$axios({
            method: 'post',
            url: '/index/item_fenlei_del',
            params:{
              id:id
            }
          })
          .then((res)=>{
            if(res.status){
              this.getdata()
              this.$message({
                type:"success",
                message:"删除成功"
              })
            }
          })
          
        })
      .catch(err => {
        this.loading = false
        this.$message({
          type:"error",
          message:err
        })
      })
    }
  },
  created(){
    this.getdata()

    // this.submitForm()
  }
}
</script>
<style scoped>
/* 分页 */
.disabled {
  /* 鼠标会显示不可点 */
  cursor: not-allowed;
  /* 会阻止事件 */
  pointer-events: none;
}
#List button:hover{
  font-weight: bold;
}
.arrowRight{
  cursor: pointer;
  transition: 0.2s;
  transform-origin: center;
  transform: rotateZ(0deg);
}
.arrowDown{
  cursor: pointer;
  transition: 0.2s;
  transform-origin: center;
  transform: rotateZ(90deg);
}
/* 三级 */
.sanJi{clear: both;width: 100%;border-bottom: 1px solid #EBEEF5;overflow: hidden;}
.sanJi .threeOne{width: 20%;}
.threeJi{width: 77%;height: 60px;line-height: 60px;display: flex;float: right;}
.sanJi .threeJi .threeImg{width: 10.6%;display: inline-block;text-align: center;}
.sanJi .threeJi .threeImg img{max-height: 98%;}
.sanJi .threeTh{width: 23%;text-align: center;margin-left: 2.7%;}
.sanJi .thSwichs{width: 16%;text-align: center;}
.sanJi .btnThree{width:24.5%;text-align: center;margin-left: 2.45%;}
.btnThree button{
   border: none;
  background-color:transparent;
}
.off {background: #F8F9FB !important;}
.on {background: white !important;}
/* 分页 */
.pagiton{text-align: center;
    padding-bottom: 10px;
    display: flex;
    width: 280px;
    padding-top:45px;
    align-items: center;
    margin: 0 auto;}
.pagiton .btn-defaults{background-color: #436AF2;border-radius: 5px;font-size:16px;color:#fff;border:1px solid #436AF2;height:28px;width:28px;line-height:28px;margin:0 10px;}
.pagiton .btn-default{background-color: #fff;border:1px solid #F7F7F7;color:#C1C1C1;height:28px;width:32px;line-height:28px;font-size:16px;}
.pagiton .remarks{margin:10px 0;color:#ABABAB;font-size:14px;padding-left:5px;}
.Goods{background-color: #fff;margin-top:12px;border-radius: 5px;padding:0 30px;}
.box{overflow:hidden;}
#List{margin: 0 auto;font-size: 14px;}
#tableList{height: 60px;width: 100%;background-color: #F8F9FB;}
.trHead th{font-size:15px;color:#3D3D3D;font-weight: 400;}
.box .listOne:last-child{border-bottom: 1px solid #EBEEF5;}
.listOne{display: flex;text-align: center;height: 60px;line-height:30px;border-bottom: 1px solid #EBEEF5;overflow: hidden;width: 100%;}
.listOne .itemId{width:11%;text-align: center;}
.listOne .itemName{width: 25%;text-align:left;color: #436AF2;padding-left:3%;box-sizing: border-box;cursor: pointer}
.listOne .itemName img{vertical-align: middle;display: inline-block;width: 5%;}
.listOne .itemName span{display: inline-block;margin-left:1%;}
.listOne .kong{width: 30%;}
.elSwich{width: 13%;box-sizing: border-box;}
.operating{width: 18%;margin-top:16px;text-align: center;margin-left: 2%;}
.operating button{
  border: none;
  background-color:transparent;
}
.listTwo .twoJi{border-bottom: 1px solid #EBEEF5;width:100%;overflow: hidden;}
.listTwo .yiyi{width: 81%;display: flex;height: 60px;line-height: 60px;float: right;overflow: hidden;}
.listTwo span{display: inline-block;text-align: left;}
.listTwo .twoOne{width:20%;box-sizing: border-box;cursor: pointer;}
.listTwo .twoL{width: 18%;text-align: center;}
.listTwo .twoL img{height:auto;max-height:98%;cursor: pointer;}
.listTwo .twoTh{width: 15%;box-sizing: border-box;text-align: center;margin-left: 2%;}
.listTwo .elSwichs{width: 18%;box-sizing: border-box;text-align: center;margin-left: 2.1%;}
.listTwo .btns{text-align: center;box-sizing: border-box;width:23%;margin-left: 1.05%;}
.btns button{
   border: none;
  background-color:transparent;
}
.banManage{background-color: #fff;padding:0 20px;line-height:65px;display: flex;justify-content: space-between;}
.banManage .classification{font-size: 1.125rem;font-weight: bold;color: #3D3D3D;}
.banManage .newbanner{width: 100px;height: 38px;border-radius: 5px;font-size:0.875rem;margin-top:15px;border:1px solid #DCDFE6;color:#606266;background: #fff;}
.banManage .newbanner:hover{background: #436AF2;color:#fff;border:1px solid #436AF2}

.banManage .oneNav{width: 120px;height: 38px;background: #436AF2;border-radius: 5px;font-size:0.875rem;margin-top:15px;box-sizing: border-box;}
.listRight{width: 260px;display:flex;justify-content: space-between;}
.search{width: 268px;display: flex;height: 38px;line-height: 38px;margin-top: 15px;border: 1px solid #EEEEEE;
border-radius: 10px;}
.search .sosuo{display: block;width: 60px;font-size:0.875rem;font-weight: 400;color: #666666;padding-top: 0;cursor: pointer;}
/deep/ .el-input--small .el-input__inner{width: 210px;font-size:0.875rem;color: #666666;margin-top:5px;border:none;}
.user-search {margin-top: 20px;}
/* 弹框 */
/deep/ .el-form-item__label{color:#8A8989;font-size:0.875rem;line-height: 50px;width: 95px !important;}
/deep/ .stateButton .el-button{background-color: #E5E5E5;color:#fff;width:30px;height: 30px;margin-top:5px;border: 1px solid blue !important;}
/deep/ .el-form-item{margin-bottom:10px;}
/deep/ .stateButton .el-button:focus,.stateButton .el-button:hover{background-color: #436AF2;border: 1px solid #436AF2;color:#fff}
/deep/ .el-input .el-input__count{font-size:0.875rem;}
.dialog-footer{display: flex;margin:0 auto;justify-content: space-around;}
.nav{font-size: 1rem;font-weight: bold;color: #3D3D3D;line-height:60px;}
/deep/ .el-form-item__content .el-input__inner{font-size: 0.875rem;border:none;height: 30px;width: 80%;}
.el-form-item__content .el-input{width:73%;height:36px;line-height:36px; border:1px solid #EEEEEE;border-radius: 5px;color:#3E3E3E;font-size: 18px;font-weight: inherit;text-indent: 0.5em;margin-left:3%;margin-top: 3px;}
.yi /deep/ .el-form-item__content .el-input{width:60%;}
/deep/ .el-dialog{border-radius:10px;}
.avatar-uploader{width:105px;display: inline-block;}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width:85px;
  height: 85px;
  line-height: 85px;
  text-align: center;
  border:1px dashed #888888;
}
.avatar {
  width: 107px;
  height: 107px;
  display: inline-block;
}
/deep/ .el-form{padding-left: 20px}
</style>